<template>
  <div 
    class="editor-nav" 
    :class="[`position-${props.position}`, { 'is-fixed': props.fixed }]"
    :style="{ backgroundColor: props.backgroundColor }"
  >
    <div 
      v-for="(item, index) in props.items" 
      :key="index" 
      class="nav-item"
    >
      <div class="nav-content">
        <i v-if="props.showIcon && item.icon" class="nav-icon" :class="item.icon"></i>
        <div 
          class="nav-text"
          :style="{ color: index === activeIndex ? props.activeColor : props.inactiveColor }"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    default: () => [
      { text: '首页', link: '/home', icon: 'home' },
      { text: '分类', link: '/category', icon: 'grid' },
      { text: '购物车', link: '/cart', icon: 'shopping-cart' },
      { text: '我的', link: '/mine', icon: 'user' }
    ]
  },
  showIcon: {
    type: Boolean,
    default: true
  },
  backgroundColor: {
    type: String,
    default: '#ffffff'
  },
  activeColor: {
    type: String,
    default: '#8B4513'
  },
  inactiveColor: {
    type: String,
    default: '#333333'
  },
  position: {
    type: String,
    default: 'bottom'
  },
  fixed: {
    type: Boolean,
    default: true
  }
});

// 当前活跃的导航项
const activeIndex = ref(0);

defineOptions({
  name: 'editor-nav'
});
</script>

<style lang="scss" scoped>
.editor-nav {
  display: flex;
  width: 100%;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  
  &.position-bottom {
    border-top: 1px solid #f0f0f0;
  }
  
  &.position-top {
    border-bottom: 1px solid #f0f0f0;
  }
  
  &.is-fixed {
    position: absolute;
    left: 0;
    z-index: 100;
    
    &.position-bottom {
      bottom: 0;
    }
    
    &.position-top {
      top: 0;
    }
  }
  
  .nav-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
    
    .nav-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 0;
      
      .nav-icon {
        font-size: 22px;
        margin-bottom: 2px;
      }
      
      .nav-text {
        font-size: 12px;
      }
    }
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
}
</style> 